<template>
  <div
    v-show="show"
    ref="tabUl"
    class="tab_ul come"
    :style="{ top: top, left: left }"
  >
    <div
      class="tab_il"
      :style="{ color: item.textColor || '' }"
      v-for="item in dataList"
      :key="item.type"
      @click="liChange(item)"
    >
      <i :class="item.icon"></i>
      <span> {{ item.name }}</span>
    </div>
    <div class="Up"></div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      required: true,
    },
    dropdownItem: {
      type: Object,
      default: () => ({
        rect: {},
        item: {},
      }),
    },
  },
  computed: {},
  data() {
    return {
      show: false,
      top: 0,
      left: 0,
    };
  },
  methods: {
    styleUl() {
      this.$nextTick(() => {
        let element = {
          top: 0,
          left: 0,
          height: 0,
        };
        if (this.$refs.tabUl) {
          element = this.$refs.tabUl.getBoundingClientRect();
        }
        this.top = this.dropdownItem.rect.top - element.height - 5 + "px";
        this.left = this.dropdownItem.rect.left - 30 + "px";
      });
    },
    toggleDropdown() {
      document.addEventListener("click", this.handleClick);
      this.show = true;
      this.styleUl();
    },
    handleClick() {
      document.removeEventListener("click", this.handleClick);
      this.show = false;
    },
    liChange(item) {
      this.$emit("command", item.type, this.dropdownItem.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab_ul {
  background-color: #fff;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  position: fixed;
  z-index: 2000;
  .tab_il {
    padding: 5px 10px;
    cursor: pointer;
    &:hover {
      background-color: #f8f9fa;
      border-radius: 5px;
      color: #0052d9;
    }
  }
  .Up {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid #ffffff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid transparent;
    bottom: -13px;
    left: 50%;
  }
}
/* 进入时的动画效果（显示） */
.come {
  animation: toggleShow 0.2s;
}
@keyframes toggleShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
